<!DOCTYPE html>
<html>
	<head>
		<title>优惠券列表</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!-- 所有的 css & js 资源 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
		<link rel="stylesheet" href="../../static/sa.css">
		<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
		<script src="https://unpkg.com/http-vue-loader@1.4.2/src/httpVueLoader.js"></script>
		<script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
		<script src="https://unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>
		<script src="https://www.layuicdn.com/layer-v3.1.1/layer.js"></script>
		<script src="../../static/sa.js"></script>
		<style>
			/* 优惠券网格布局 */
			.coupon-grid {
				display: grid;
				grid-template-columns: repeat(5, 1fr);
				gap: 16px;
				padding: 20px;
				max-width: 1600px;
				margin: 0 auto;
			}

			/* 优惠券卡片样式 */
			.coupon-card {
				position: relative;
				background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
				border-radius: 12px;
				overflow: hidden;
				cursor: pointer;
				transition: all 0.3s ease;
				box-shadow: 0 4px 20px rgba(255, 107, 107, 0.3);
				height: 160px;
				color: white;
				display: flex;
				flex-direction: column;
			}

			.coupon-card:hover {
				transform: translateY(-3px);
				box-shadow: 0 8px 30px rgba(255, 107, 107, 0.4);
			}

			.coupon-card.selected {
				border: 2px solid #ffeb3b;
				box-shadow: 0 0 0 4px rgba(255, 235, 59, 0.3);
			}

			/* 优惠券主体 */
			.coupon-main {
				flex: 1;
				padding: 16px;
				position: relative;
				display: flex;
				align-items: center;
			}

			/* 左侧金额区域 */
			.coupon-amount-section {
				flex: 0 0 auto;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-right: 20px;
				padding-right: 20px;
				border-right: 2px dashed rgba(255,255,255,0.4);
				position: relative;
			}

			.coupon-amount {
				display: flex;
				align-items: baseline;
				margin-bottom: 4px;
			}

			.currency {
				font-size: 16px;
				font-weight: 500;
				margin-right: 2px;
			}

			.amount {
				font-size: 32px;
				font-weight: bold;
				line-height: 1;
			}

			.coupon-condition {
				font-size: 11px;
				opacity: 0.9;
				text-align: center;
				background: rgba(255,255,255,0.2);
				padding: 2px 6px;
				border-radius: 8px;
				white-space: nowrap;
			}

			/* 右侧信息区域 */
			.coupon-info-section {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
			}

			.coupon-name {
				font-size: 14px;
				font-weight: 600;
				margin-bottom: 4px;
				line-height: 1.2;
			}

			.coupon-type {
				font-size: 9px;
				opacity: 1;
				margin-bottom: 4px;
				background: rgba(255,255,255,0.3);
				padding: 1px 3px;
				border-radius: 2px;
				display: inline-block;
				font-weight: 600;
				color: white;
				letter-spacing: 0.5px;
			}

			.coupon-validity {
				font-size: 11px;
				opacity: 0.9;
				display: flex;
				align-items: center;
				gap: 3px;
				margin-bottom: 4px;
			}

			.coupon-id {
				font-size: 10px;
				opacity: 0.7;
			}

			/* 优惠券底部操作区 */
			.coupon-actions {
				padding: 10px 18px;
				background: rgba(0,0,0,0.15);
				display: flex;
				gap: 8px;
				justify-content: center;
			}

			.coupon-actions .el-button {
				border: 1px solid rgba(255,255,255,0.4);
				background: rgba(255,255,255,0.15);
				color: white;
				font-size: 11px;
				padding: 5px 10px;
				border-radius: 4px;
				min-width: 45px;
				height: 26px;
			}

			.coupon-actions .el-button:hover {
				background: rgba(255,255,255,0.25);
				border-color: rgba(255,255,255,0.6);
			}

			/* ID区域 */
			.coupon-id-top {
				position: absolute;
				top: 12px;
				left: 12px;
				z-index: 10;
				font-size: 12px;
				opacity: 0.9;
				color: white;
				font-weight: 500;
			}

			/* 装饰性圆孔 */
			.coupon-decoration {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				pointer-events: none;
			}

			.coupon-hole {
				position: absolute;
				width: 20px;
				height: 20px;
				background: #f5f5f5;
				border-radius: 50%;
				top: 50%;
				transform: translateY(-50%);
			}

			.coupon-hole-left {
				left: -10px;
			}

			.coupon-hole-right {
				right: -10px;
			}

			/* 不同状态的优惠券颜色 - 统一为红色 */
			.coupon-card.status-shopping,
			.coupon-card.status-newcomer,
			.coupon-card.status-activity {
				background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
			}

			/* 空状态 */
			.empty-state {
				grid-column: 1 / -1;
				text-align: center;
				padding: 60px 20px;
			}

			/* 响应式设计 */
			@media (max-width: 1600px) {
				.coupon-grid {
					grid-template-columns: repeat(4, 1fr);
					gap: 14px;
				}
			}

			@media (max-width: 1200px) {
				.coupon-grid {
					grid-template-columns: repeat(3, 1fr);
					gap: 14px;
				}
			}

			@media (max-width: 900px) {
				.coupon-grid {
					grid-template-columns: repeat(2, 1fr);
					gap: 12px;
				}
			}

			@media (max-width: 600px) {
				.coupon-grid {
					grid-template-columns: 1fr;
					gap: 12px;
					padding: 12px;
				}

				.coupon-main {
					padding: 16px;
				}

				.coupon-amount-section .amount {
					font-size: 28px;
				}

				.coupon-name {
					font-size: 14px;
				}
			}
		</style>
	</head>
	<body>
		<div class="vue-box" style="display: none;" :style="'display: block;'">
			<div class="c-panel">
				<!-- ------------- 检索参数 ------------- -->
				<div class="c-title">检索参数</div>
				<el-form ref="form" :model='p' @submit.native.prevent class="search-form">
					<div class="c-item">
						<label class="c-label">优惠券名称：</label>
						<el-input v-model="p.name" placeholder="请输入优惠券名称" style="width: 200px;"></el-input>
						<label class="c-label" style="margin-left: 20px;">优惠券状态：</label>
						<el-select v-model="p.status" placeholder="请选择状态" style="width: 150px;" clearable>
							<el-option label="全部" value=""></el-option>
							<el-option label="商品券" value="shopping"></el-option>
							<el-option label="新人券" value="newcomer"></el-option>
							<el-option label="活动券" value="activity"></el-option>
						</el-select>
						<el-button type="primary" icon="el-icon-search" @click="p.pageNo = 1; f5()" style="margin-left: 10px;">查询</el-button>
					</div>
				</el-form>
				<!-- ------------- 快捷curd按钮 ------------- -->
				<div class="fast-btn">
					<el-button type="primary" icon="el-icon-plus" @click="add()">新增</el-button>
					<el-button type="success" icon="el-icon-view" @click="getBySelect()">查看</el-button>
					<el-button type="info" icon="el-icon-refresh" @click="f5()">刷新</el-button>
				</div>
				<!-- ------------- 优惠券卡片列表 ------------- -->
				<div class="coupon-grid" v-loading="loading">
					<div v-for="coupon in dataList" :key="coupon.id" :class="'coupon-card status-' + coupon.status" @click="selectCoupon(coupon)">
						<!-- 优惠券主体 -->
						<div class="coupon-main">
							<!-- 左侧金额区域 -->
							<div class="coupon-amount-section">
								<div class="coupon-amount">
									<span class="currency">￥</span>
									<span class="amount">{{ coupon.amount }}</span>
								</div>
								<div class="coupon-condition">
									{{ coupon.min_order_amount > 0 ? '满￥' + coupon.min_order_amount + '可用' : '无门槛' }}
								</div>
							</div>

							<!-- 右侧信息区域 -->
							<div class="coupon-info-section">
								<div class="coupon-name">{{ coupon.name }}</div>
								<div class="coupon-type">{{ getStatusText(coupon.status) }}</div>
								<div class="coupon-validity">
									<i class="el-icon-time"></i>
									{{ coupon.start_date }} 至 {{ coupon.end_date }}
								</div>
							</div>
						</div>

						<!-- 优惠券底部操作区 -->
						<div class="coupon-actions">
							<el-button size="mini" type="success" icon="el-icon-view" @click.stop="get(coupon)">查看</el-button>
							<el-button size="mini" type="primary" icon="el-icon-edit" @click.stop="update(coupon)">修改</el-button>
							<el-button size="mini" type="danger" icon="el-icon-delete" @click.stop="del(coupon)">删除</el-button>
						</div>

						<!-- ID区域 -->
						<div class="coupon-id-top">ID: {{ coupon.id }}</div>

						<!-- 装饰性元素 -->
						<div class="coupon-decoration">
							<div class="coupon-hole coupon-hole-left"></div>
							<div class="coupon-hole coupon-hole-right"></div>
						</div>
					</div>

					<!-- 空状态 -->
					<div v-if="!loading && dataList.length === 0" class="empty-state">
						<i class="el-icon-tickets" style="font-size: 64px; color: #ddd; margin-bottom: 16px;"></i>
						<p style="color: #999; font-size: 16px;">暂无优惠券</p>
					</div>
				</div>
				<!-- ------------- 分页 ------------- -->
				<div class="page-box">
					<el-pagination background layout="total, prev, pager, next, sizes, jumper" 
						:current-page.sync="p.pageNo" 
						:page-size.sync="p.pageSize" 
						:total="dataCount"
						:page-sizes="[10, 20, 30, 40, 50]"
						@current-change="f5()" 
						@size-change="f5()">
					</el-pagination>
				</div>
			</div>
		</div>
		<script>
			var app = new Vue({
				components: {
					"sa-item": httpVueLoader('../../sa-frame/com/sa-item.vue'),		
					"sa-td": httpVueLoader('../../sa-frame/com/sa-td.vue'),			
				},
				el: '.vue-box',
				data: {
					p: { // 查询参数
						pageNo: 1,       // 当前页
						pageSize: 10,    // 页大小
					},
					dataCount: 0,
					dataList: [], // 数据集合
					selectedCoupons: [], // 选中的优惠券
					loading: false
				},
				methods: {
					// 刷新
					f5: function() {
						// 构建请求参数，只包含非空值
						var params = {
							pageNo: this.p.pageNo,
							pageSize: this.p.pageSize
						};

						// 添加其他非空参数
						if (this.p.name) params.name = this.p.name;
						if (this.p.status) params.status = this.p.status;

						console.log('发送请求参数:', params);

						// 根据是否有状态参数选择不同的接口
						var url = this.p.status ?
							'http://localhost:8080/coupon/listCouponByStatus' :
							'http://localhost:8080/coupon/listCoupon';

						$.ajax({
							url: url,
							type: 'GET',
							data: params,
							success: function(res) {
								console.log('接收到响应:', res);
								if (res.code === 200) {
									this.dataList = res.data.list || [];
									this.dataCount = res.data.total || 0;
									this.p.pageNo = res.data.pageNum || 1;
									console.log('处理后的数据列表:', this.dataList);
									console.log('总数据量:', this.dataCount);
									sa.f5TableHeight(); // 刷新表格高度
								} else {
									sa.alert('获取数据失败：' + res.message);
								}
							}.bind(this),
							error: function(xhr, status, error) {
								console.error('请求失败:', error);
								console.error('状态:', status);
								console.error('详细信息:', xhr);
								sa.alert('请求失败：' + error);
							}.bind(this)
						});
					},
					// 查看
					get: function(data) {
						var str = '<div class="detail-box">';
						str += '<p><b>优惠券详情</b></p>';
						str += '<p>ID：' + data.id + '</p>';
						str += '<p>优惠券名称：' + data.name + '</p>';
						str += '<p>优惠金额：￥' + data.amount + '</p>';
						str += '<p>最低消费：' + (data.min_order_amount > 0 ? '￥' + data.min_order_amount : '无门槛') + '</p>';
						str += '<p>有效期：' + data.start_date + ' 至 ' + data.end_date + '</p>';
						str += '</div>';
						sa.alert(str);
					},
					// 查看 - 根据选中的
					getBySelect: function() {
						var selection = this.$refs['data-table'].selection;
						if(selection.length == 0) {
							return sa.msg('请选择一条数据')
						}
						this.get(selection[0]);
					},
					// 新增
					add: function() {
						sa.showIframe('新增优惠券', 'coupon-add.html', '750px', '580px');
					},
					// 修改
					update: function(data) {
						sa.showIframe('修改优惠券', 'coupon-add.html?id=' + data.id, '550px', '500px');
					},
					// 删除
					del: function(data) {
						sa.confirm('是否删除此优惠券？此操作不可撤销', function() {
							$.ajax({
								url: 'http://localhost:8080/coupon/deleteCoupon',
								type: 'POST',
								data: {id: data.id},
								success: function(res) {
									if(res.code === 200) {
										sa.arrayDelete(this.dataList, data);
										sa.ok('删除成功');
										sa.f5TableHeight();
									} else {
										sa.error(res.message || '删除失败');
									}
								}.bind(this)
							});
						}.bind(this));
					},
					// 获取状态文本
					getStatusText: function(status) {
						const statusMap = {
							'shopping': '商品券',
							'newcomer': '新人券',
							'activity': '活动券'
						};
						return statusMap[status] || status;
					}
				},
				created: function() {
					this.f5();
					sa.onInputEnter();
				}
			})
		</script>
		<style>
		.detail-box {
			padding: 15px;
			line-height: 2em;
		}
		.detail-box p {
			margin: 5px 0;
		}
		.detail-box b {
			font-size: 16px;
			color: #333;
		}
		.search-form {
			padding: 15px;
		}
		.search-form .c-item {
			display: flex;
			align-items: center;
			margin-bottom: 15px;
		}
		.search-form .c-label {
			width: 100px;
			text-align: right;
			padding-right: 12px;
			line-height: 40px;
		}
		.fast-btn {
			margin: 10px 0;
			padding: 0 15px;
		}
		</style>
	</body>
</html>
